<template>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed prop="date" label="序号" width="150" />
    <el-table-column  >  <template #default="scope">
        <img :src="scope.row.img" height="120" alt="">
      </template></el-table-column>
    <el-table-column prop="state" label="商品名称" width="250" />
    <!-- <el-table-column prop="city" label="City" width="120" />
    <el-table-column prop="address" label="Address" width="600" /> -->
    <!-- <el-table-column prop="zip" label="Zip" width="120" /> -->
    <el-table-column fixed="right" label="操作" width="200">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="handleClick(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script  setup>
// const handleClick = () => {
//   console.log('click')
// }
import { computed, ref, reactive, onMounted } from 'vue'

import { getShopcar } from '@/api/shopcar.js'

const tableData = ref([
{
    date: '1',
    img: 'https://img0.baidu.com/it/u=4012905046,3758388239&fm=253&fmt=auto&app=120&f=JPEG?w=455&h=256',
    state: '热巴',
    
  },
  {
    date: '2',
    img: 'https://img0.baidu.com/it/u=2396188909,1864878068&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666',
    state: '热巴',
    
  },
  {
    date: '3',
    img: 'https://img1.baidu.com/it/u=2389518793,4032112752&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750',
    state: '热巴',
    
  },
  {
    date: '4',
    img: 'https://img1.baidu.com/it/u=1491108027,2715040530&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707',
    state: '热巴',
    
  },
])
import { ElMessage, ElMessageBox } from 'element-plus'
const handleClick = (index, row) => {
  ElMessageBox.alert('您是否要删除？', '提示', {
    // if you want to disable its autofocus
    // autofocus: false,
    confirmButtonText: '确定',
    callback: async (action) => {
      if (action === 'confirm') {
        // 删除接口
        let res = await getShopcar('/cart/remove', { date: row.date })
        // 是否删除成功
        if (res.code == '200') {
          tableData.value.splice(index, 1)
          ElMessage({
            type: 'success',
            message: `删除成功`,
          })
        }
      }
    },
  })
}
onMounted(async () => {
  let res = await getShopcar('/cart/list1')
  console.log(res)
  if (res.code == '200') {
    tableData.value = res.data
    loading.value = false
  }
})
</script>
<style lang="">
  
</style>